
import { loginPage, getReviewList, getIssueList, addIssue } from './dataStore.js'

const sendIssue = (content) => {
    const issueData = {}
    const d = new Date()
    issueData.desc = content
    issueData.name = '木板'
    issueData.city = '广州'
    issueData.like = 0
    issueData.time = d.getHours() + ':' + d.getMinutes()
    addIssue(issueData).then(() => {
        createIssueItem(issueData)
    })
}

const createIssueItem = (issueData) => {
    const issueLayer = document.querySelector('.comment-list')
    const issueItem = `
    <li>
        <div class="goods">${issueData.like}</div>
        <div class="content">
            <div class="content-top">
                <i></i>
                <div>
                    <p class="user">${issueData.name}</p>
                    <p class="info">${issueData.city} ${issueData.time}</p>
                </div>
            </div>
            <div class="content-bottom">
                <p>${issueData.desc}</p>
                <div>
                    <i></i>
                    <span>回复</span>
                </div>
            </div>
        </div>
    </li>
    `
    issueLayer.innerHTML += issueItem
}

const videoInit = () => {
    /* index.js */
    const oPlay = document.querySelector('.video-play')
    const oImg = document.querySelector('.video-play img')
    const oVideo = document.querySelector('video');
    // const aPersonList = document.querySelectorAll('.person-list li');
    // const oInfo = document.querySelector('.person-info');
    // const aImg = document.querySelectorAll('.person-name img');
    const oUser = document.querySelector('.header-user');
    const hideBox = document.querySelector('.hide-box');
    const oBack = document.querySelector('.back');
    // const oContainer = document.querySelector('.container')
    const oMask = document.querySelector('.mask');
    const oSidebar = document.querySelector('.sidebar');
    const sidebarContent = document.querySelector('.sidebar-content');
    // let screenState;

    oImg.onclick = function () {
        if (oVideo.paused) {
            oVideo.play();
            oPlay.className += ' hide';
        } else {
            oVideo.pause();
            oPlay.className = 'video-play'
        }
    }

    oVideo.onclick = function () {
        if (oVideo.paused) {
            oVideo.play();
            oPlay.className += ' hide';
        } else {
            oVideo.pause();
            oPlay.className = 'video-play'
        }
    }

    window.onscroll = function () {
        let scrollTop = document.documentElement.scrollTop;
        if (scrollTop > 980 && window.innerWidth > 768) {
            oSidebar.className += ' fix';
            sidebarContent.style.height = '620px';
        } else {
            oSidebar.className = 'sidebar';
            sidebarContent.style.height = '920px';
        }
    }

    window.onresize = function () {
        let maxWidth = window.innerWidth;
        if (maxWidth <= 768) {
            oUser.onclick = function () {
                hideBox.style.display = 'block';
                oMask.style.display = 'block';
            }

            oBack.onclick = function () {
                hideBox.style.display = 'none';
                oMask.style.display = 'none';
            }
        }
    }
}

const commentInit = () => {
    const commentBtn = document.querySelector('#comment-button')
    const commentInput = document.querySelector('#common-input')

    commentBtn.onclick = () => {
        let content = commentInput.value
        sendIssue(content)
        commentInput.value = ''
    }
}

const main = () => {
    videoInit()
    commentInit()
    // 登陆
    loginPage()
        .then(() => {
            getReviewList().then((list) => {
                console.log('往期回顾列表', list)
            })

            getIssueList().then((list) => {
                console.log('留言列表', list)
                for (let i = 0; i < list.length; i++) {
                    createIssueItem(list[i])
                }
            })

        })

}

main()




